<template>
	<view v-if="usersid">


		<view class="header">
			<view>
				<image src="@/static/morenheadImg.png"></image>
			</view>
			<view class="text">
				<view>{{store.state.users.name}}</view>
				<!-- <view>撒大大</view> -->
			</view>
			<view class="jiaotou"></view>
		</view>
		<view class="contextbg">
			<view class="items" @click="totheme">
				<view class="img">
					<image src="../../static/shezhi.png" mode=""></image>
				</view>
				<view class="text">我的主题</view>
				<view class="you">
					<text></text>
				</view>
			</view>
			<view class="items" @click="totheme">
				<view class="img">
					<image src="../../static/shezhi.png" mode=""></image>
				</view>
				<view class="text">反馈</view>
				<view class="you">
					<text></text>
				</view>
			</view>
			<view class="items" @click="totheme">
				<view class="img">
					<image src="../../static/shezhi.png" mode=""></image>
				</view>
				<view class="text">通知</view>
				<view class="you">
					<text></text>
				</view>
			</view>
		</view>
		<view class="tuilogin" @click="toEnroll">退出登录</view>
	</view>
	<view v-else>
		<view class="header">
			<view>
				<image src="@/static/morenheadImg.png"></image>
			</view>
			<view class="text">
				<view>未登录</view>
				<view>你还没有登录</view>
			</view>
			<view class="jiaotou"></view>
		</view>
		<view class="contextbg">
			
			<view class="items" @click="totheme">
				<view class="img">
					<image src="../../static/shezhi.png" mode=""></image>
				</view>
				<view class="text">反馈</view>
				<view class="you">
					<text></text>
				</view>
			</view>
			
		</view>
		<view class="tuilogin" @click="toEnroll">去登录</view>
	</view>
</template>
<script setup>
	import {
		useStore
	} from 'vuex'
	import {
		selecttheme
	} from '@/api/users.js'
	let store = useStore()

	const totheme = () => {
		uni.navigateTo({
			url: '/pages/user/theme'
		})
	}
	const toEnroll = () => {
		uni.removeStorageSync('usersdata')
		store.commit('updateDatas', null)
		store.commit('updatename', null)
		store.commit('updatexiangqing', null)
		store.commit('updateusers', null)
		store.commit('updatetheme', null)
		uni.reLaunch({
			url: '/pages/enroll/enroll'
		})
	}
	let usersid = store?.state?.users?.id
	if (usersid) {
		selecttheme(usersid).then((res) => {
			let theme = res.data.data[0]
			let ss = {}
			ss.textcolor = theme.textcolor,
				ss.bgcolor = theme.bgcolor,
				ss.size = theme.size
			store.commit('updatetheme', ss)
		})
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		margin-top: 20rpx;
		justify-content: space-around;
		align-items: center;
		height: 400rpx;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		background-color: #ffffff;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}

		.text {
			width: 380rpx;
			text-align: left;
			margin-left: 50rpx;

			view:nth-child(1) {
				font-size: 40rpx;
				font-weight: 600;
			}

			view:nth-child(2) {
				margin-top: 30rpx;
				font-size: 20rpx;
			}
		}

		.jiaotou {
			height: 40rpx;
			width: 40rpx;
			border-right: 4rpx solid #969696;
			border-bottom: 4rpx solid #969696;
			transform: rotate(-45deg);
		}
	}

	.contextbg {
		padding-top: 40rpx;
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
		border-radius: 40rpx;
	}

	.items {
		width: 650rpx;
		height: 120rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		color: #afafaf;
		align-items: center;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		background-color: #ffffff;

		.img {
			image {
				width: 50rpx;
				height: 50rpx;
				margin-top: 5rpx;
				margin-left: 25rpx;
				margin-right: 25rpx;
			}
		}

		.text {
			width: 500rpx;

		}

		.you {
			width: 100rpx;

			text {
				display: block;
				width: 20rpx;
				height: 20rpx;
				border-bottom: 3rpx solid #afafaf;
				border-right: 3rpx solid #afafaf;
				transform: rotate(-45deg);
			}
		}

	}

	.tuilogin {
		width: 700rpx;
		height: 90rpx;
		background-color: #f50f50;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 200rpx;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;

	}
</style>